<template>
	<!-- title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToGendandating">
			<image class="title_leftbox_image_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middlebox_text">X的战绩</view>
		</view>
		<view class="title_rightbox">
			<view class="title_rightbox_text"></view>
		</view>
	</view>

	<!--匿名用户部分 -->
	<view class="nimingyonghubox">
		<image class="nimingyonghubox_img" src="../../static/geren.png"></image>
		<view class="nimingyonghubox_textbox">
			<view class="nimingyonghubox_textbox_textbox1">
				<view class="nimingyonghubox_textbox1">匿名用户</view>
				<image class="nimingyongyonghubox_textbox_textbox1_img" src="../../static/vip0.png"></image>
			</view>
			<view class="nimingyonghubox_textbox_textbox2">
				<view class="nimingyonghubox_textbox_textbox2_text">粉丝：0人</view>
				<view class="nimingyonghubox_textbox_textbox2_text">关注：{{ followersCount }}人</view>
			</view>
			<view class="nimingyonghubox_textbox_textbox3">
				<view class="nimingyonghubox_textbox_textbox3_text" @click="toggleFollow">
					{{ isFollowed ? '已关注' : '+关注' }}
				</view>
			</view>
		</view>
	</view>

	<!-- 我的战绩部分 -->
	<view class="zhanji">
		<!-- <view class="zhanji_text">我的战绩</view> -->
		<view class="zhanjibox_textbox">
			<view class="zhanjibox_textbox_nrbox">
				<view class="zhanjibox_textbox_nrbox_text1">0元</view>
				<view class="zhanjibox_textbox_nrbox_text2">累计中奖</view>
			</view>
			<view class="zhanjibox_textbox_nrbox">
				<view class="zhanjibox_textbox_nrbox_text1">0%</view>
				<view class="zhanjibox_textbox_nrbox_text2">7日盈利</view>
			</view>
			<view class="zhanjibox_textbox_nrbox">
				<view class="zhanjibox_textbox_nrbox_text1">0中0</view>
				<view class="zhanjibox_textbox_nrbox_text2">7日命中</view>
			</view>
			<view class="zhanjibox_textbox_nrbox">
				<view class="zhanjibox_textbox_nrbox_text1">0</view>
				<view class="zhanjibox_textbox_nrbox_text2">带红人数</view>
			</view>
		</view>
		<view class="jinwuqibox">
			<view class="jinwuqibox_text">近五期</view>
			<view class="jinwuqibox_hezi" v-for="item in [0, 0, 0, 1, 1]" :class="{ 'zhong': item === 1 }">
				{{ item === 1 ? '中' : '未' }}
			</view>
		</view>
	</view>

	<!-- 赛事部分 -->
	<view class="saishibox">
		<view class="saishinrbox" v-for="event in events" :key="event.id">
			<view class="saishinrbox_imagetextbox">
				<image class="saishinrbox_imagetextbox_img" src="../../static/lanqiu2.png"></image>
				<view class="saishinrbox_imagetextbox_text1">{{ event.name }}</view>
				<view class="saishinrbox_imagetextbox_text2">{{ event.time }}</view>
			</view>
			<view class="saishinrbox_dierbufenbox">
				<view class="saishinrbox_dierbufenbox_leftbox">
					<view class="saishinrbox_dierbufenbox_leftbox_nrbox1">
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox1_text1">{{ event.sport }}</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox1_text2">{{ event.type }}</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox1_text3">预计回报：</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox1_text4">{{ event.return }}</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox1_text5">倍</view>
					</view>
					<view class="saishinrbox_dierbufenbox_leftbox_nrbox2">
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox2_text1">自购：</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox2_text2">{{ event.betAmount }}</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox2_text3">元</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox2_text4">跟单：</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox2_text5">{{ event.followers }}</view>
						<view class="saishinrbox_dierbufenbox_leftbox_nrbox2_text6">人</view>
					</view>
				</view>
				<view class="saishinrbox_dierbufenbox_rightbox">
					<image class="saishinrbox_dierbufenbox_rightbox_img"
						:src="event.won ? '../../static/yizhongjiang.png' : '../../static/weizhongjiang.png'"></image>
					<view class="saishinrbox_dierbufenbox_rightbox_text">{{ event.won ? '￥2812.32元' : '' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// subCurrent: 0, // 默认选中第一个子tab
				// tabs: ['我的跟单', '我的方案', '我的定制', '定制我的'],
				isFollowed: false, // 是否已经关注
				followersCount: 0, // 关注人数
				events: [{
						id: 1,
						name: '精彩赛事',
						time: '10-18 16:30 截止',
						sport: '竞彩足球',
						type: '固定单关',
						return: '9.77',
						betAmount: '288',
						followers: '0',
						won: true
					},
					{
						id: 2,
						name: '精彩赛事',
						time: '10-18 16:30 截止',
						sport: '竞彩足球',
						type: '固定单关',
						return: '19.77',
						betAmount: '288',
						followers: '0',
						won: true
					},
					{
						id: 3,
						name: '精彩赛事',
						time: '10-18 16:30 截止',
						sport: '竞彩足球',
						type: '2串1',
						return: '9.77',
						betAmount: '288',
						followers: '0',
						won: false
					}
				]
			}
		},
		methods: {
			subChecked(index) {
				this.subCurrent = index;
			},
			goToGendandating() {
				uni.switchTab({
					url: '/pages/gendan/gendan', // 跟单路径
				});
			},
			goToJingcaizuqiu() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/jingcaizuqiu/jingcaizuqiu'
				});
			},
			goToDingzhi() {
				// 使用uni-app的navigateTo方法跳转
				uni.navigateTo({
					url: '/pages/dingzhi/dingzhi'
				});
			},
			toggleFollow() {
				if (!this.isFollowed) {
					this.isFollowed = true;
					this.followersCount += 1;
				} else {
					this.isFollowed = false;
					this.followersCount -= 1;
				}
			},
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}

	/* 以下是title部分样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 使左右盒子分别位于两侧 */
		padding: 2%;
	}

	.title_leftbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使图标居中 */
	}

	.title_leftbox_image_fanhui {
		width: 20px;
		height: 25px;
	}

	.title_middlebox {
		flex-grow: 1;
		/* 使中间盒子占据剩余空间 */
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	.title_middlebox_text {
		font-size: 15px;
		color: white;
		font-weight: 700;
	}

	.title_rightbox {
		display: flex;
		align-items: center;
		justify-content: center;
		/* 使文本居中 */
	}

	.title_rightbox_text {
		font-size: 15px;
		color: white;
	}


	/* 匿名用户部分 */
	.nimingyonghubox {
		padding: 0% 6%;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eeeeee;
		background: white;
	}

	.nimingyonghubox_img {
		width: 33px;
		height: 33px;
		display: block;
		margin-right: 5%;
	}

	.nimingyonghubox_textbox {
		padding: 2%;
		/* width: 80%; */
		flex: 1;
	}

	.nimingyonghubox_textbox_textbox1 {
		display: flex;
	}

	.nimingyongyonghubox_textbox_textbox1_img {
		width: 63px;
		height: 23px;
	}

	.nimingyonghubox_textbox1 {
		font-size: 14px;
	}

	.nimingyonghubox_textbox_textbox2 {
		display: flex;
		margin-right: 2%;
	}

	.nimingyonghubox_textbox_textbox2_text {
		font-size: 12px;
		/* width: 72%; */
		padding-right: 5%;
		font-weight: 700;
	}

	.nimingyonghubox_textbox_textbox3 {
		align-items: center;
		justify-content: center;
		position: absolute;
		/* top: 6px; */
		right: 33px;
		top: 57px;
		border: 1px solid #e23234;
		padding: 1%;
		border-radius: 7px;
	}

	.nimingyonghubox_textbox_textbox3_text {
		color: #e23234;
		font-size: 14px;
	}

	/* 我的战绩部分 */
	.zhanji {
		padding: 2%;
		margin-bottom: 2%;
		background: white;
	}

	.zhanji_text {
		padding: 2% 0 4% 0;
		font-size: 15px;
		border-bottom: 1px solid #eeeeee;
	}

	.zhanjibox_textbox {
		display: flex;
		align-items: center;
		padding: 2%;
		border-bottom: 1px solid #eeeeee;
	}

	.zhanjibox_textbox_nrbox {
		text-align: center;
		flex: 1;
	}

	.zhanjibox_textbox_nrbox_text1 {
		color: #e23234;
		font-size: 15px;
	}

	.zhanjibox_textbox_nrbox_text2 {
		color: #999999;
		font-size: 15px;
	}

	.jinwuqibox {
		display: flex;
		align-items: center;
		/* border-bottom: 1px solid #eeeeee; */
	}

	.jinwuqibox_text {
		font-size: 15px;
		color: #999999;
		padding: 4%;
	}

	.jinwuqibox_hezi {
		width: 25px;
		height: 25px;
		background: #999999;
		border-radius: 50px;
		margin: 0 auto;
		text-align: center;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.zhong {
		background: #e23234;
	}

	/* 赛事部分样式 */
	.saishibox {
		background: white;
		padding: 0 2%;
	}

	.saishinrbox {
		border-bottom: 1px solid #e5e5e5;
	}

	.saishinrbox_imagetextbox {
		display: flex;
		/* margin-bottom: 3%; */
		align-items: center;
		padding: 2% 0 0 0;
	}

	.saishinrbox_imagetextbox_img {
		width: 21px;
		height: 21px;
		margin-right: 3%;
	}

	.saishinrbox_imagetextbox_text1 {
		font-size: 14px;
		color: #303133;
		flex: 1;
	}

	.saishinrbox_imagetextbox_text2 {
		font-size: 14px;
		color: #999999;
	}

	.saishinrbox_dierbufenbox {
		display: flex;
		align-items: center;
	}

	.saishinrbox_dierbufenbox_leftbox {
		/* display: flex; */
		flex: 1;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox1 {
		display: flex;
		margin-bottom: 2%;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox1_text1 {
		font-size: 13px;
		color: #303133;
		margin-right: 2%;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox1_text2 {
		font-size: 13px;
		color: #303133;
		margin-right: 4%;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox1_text3 {
		font-size: 13px;
		color: #303133;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox1_text4 {
		font-size: 13px;
		color: #e23234;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox1_text5 {
		font-size: 13px;
		color: #303133;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2 {
		display: flex;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2_text1 {
		font-size: 13px;
		color: #303133;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2_text2 {
		font-size: 13px;
		color: #e23234;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2_text3 {
		font-size: 13px;
		color: #303133;
		margin-right: 1%;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2_text4 {
		font-size: 13px;
		color: #303133;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2_text5 {
		font-size: 13px;
		color: #e23234;
	}

	.saishinrbox_dierbufenbox_leftbox_nrbox2_text6 {
		font-size: 13px;
		color: #303133;
	}

	.saishinrbox_dierbufenbox_rightbox {
		position: relative;
		/* 添加相对定位 */
	}

	.saishinrbox_dierbufenbox_rightbox_img {
		width: 60px;
		height: 60px;
	}

	.saishinrbox_dierbufenbox_rightbox_text {
		font-size: 9px;
		position: absolute;
		bottom: 22px;
		right: 6px;
		transform-origin: bottom right;
		transform: rotate(15deg);
		color: #e23234;
	}
</style>
